<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">
    <style>
        .text-justify{
            text-align: justify;
        }
    </style>
    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h2>【css-4】position定位有哪几种？各有什么特点？</h2>
            <h3>深圳分院小课堂
            <p>分享人：张峻</p>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <h3>1.背景介绍</h3>
        </section>
        <section style="text-align: justify;">
            position是CSS中非常重要并且常用的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。
        </section>
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <section style="text-align: left">
        <h3>position介绍</h3>
        position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和  left ，还有 z-index 属性则决定了该元素的最终位置。<br>
        position的定位方式共有四个常用的：static、relative、absolute、fixed。还有不常用的：inherit、initial、unset、sticky<br>
        </section>
        <section>
            <h3>top/right/bottom/left</h3>
            <img src="../img/css-04-position-2018-1-28/layout-position.png"><br>
            <a href="../demo/css-04-position-2018-1-28/1.trbl.html" target="_blank">Demo</a>
        </section>
        <section>
            <h3>z-index</h3>
            <img src="../img/css-04-position-2018-1-28/z-index.png" height="400px">
            <p>Z轴上的排序</p>
        </section>
        <section>
            <h3>那是不是z-index值越大，元素就一定在最上面呢？</h3>
        </section>
        <section>
            <h3>z-index栈</h3>
            <img src="../img/css-04-position-2018-1-28/layout-position-zindex-stack.jpg"><br>
            <a href="../demo/css-04-position-2018-1-28/2.z-index.html" target="_blank">Demo</a>
        </section>
        <section style="text-align: left">
        <h3>Static</h3>
        所有元素在默认的情况下position属性均为static。<br>
        其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。<br>
        需要注意的是z-index属性在position为static的情况下无效。
        </section>
        <section>
            <section style="text-align: left">
            <h3>relative</h3>
            俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。
            </section> 
            <section>
                <h3>relative的特点</h3>
                <ul>
                    <li>仍在文档流之中，并按照文档流中的顺序进行排列。</li>
                    <li>参照物为元素本身的位置。</li>
                    <li>设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。</li>
                </ul>
                <br>
                <a href="../demo/css-04-position-2018-1-28/3.position_relative.html" target="_blank">Demo</a>
            </section>
        </section>
        <section>
            <section style="text-align: left">
            <h3>Absolute</h3>
            俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。
            </section>
            <section>
                <h3>Absolute的特点</h3>
                <ul>
                    <li>默认宽度为内容宽度</li>
                    <li>脱离文档流</li>
                    <li>参照物为第一个定位祖先或根元素（&lt;html&gt; 元素）</li>
                </ul>
                <br>
                <a href="../demo/css-04-position-2018-1-28/4.position_absolute.html" target="_blank">Demo</a>
            </section>
            
        </section>
       <section>
            <section style="text-align: left">
                <h3>Fixed</h3>
                俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：<br>
                1.会改变行内元素的呈现模式，使display值变更为block。<br>
                2.会让元素脱离普通流，不占据空间。<br>
                3.默认会覆盖到非定位元素上。<br>
                fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。<br>
            </section>
            <section>
                <h3>Fixed的特点</h3>
                 <ul>
                    <li>默认宽度为内容宽度</li>
                    <li>脱离文档流</li>
                    <li>参照物为视窗</li>
                </ul>
                <br>
                <a href="../demo/css-04-position-2018-1-28/6.position_fixed.html" target="_blank">Demo</a>
            </section>
        </section>
        <section>
        <h3>3.常见问题</h3>
        </section>
        <section>
            <h3>如何利用Absolute实现三行自适应布局？</h3> 
        </section>
        <section>
            <h3>4.解决方案</h3>
        </section>
        <section>
            <section>
               <h3>利用Absolute实现三行自适应布局的方法</h3> 
            </section>
            <section>
                <img src="../img/css-04-position-2018-1-28/row3.png">
                <a href="../demo/css-04-position-2018-1-28/5.3row_fit.html" target="_blank">Demo</a>
            </section>    
        </section>
        <section>
            <h3>5.编码实战</h3>
        </section>
        <section>
            <h3>6.扩展思考</h3>
        </section>
        <section>
            <section>
            position属性中的sticky是什么？
            </section>
            <section>
                <p style="text-align: left">position:sticky 其实还是一个处于实验性的取值。</p>
               <p style="text-align: left">sticky 英文字面意思是粘，粘贴，所以姑且称之为粘性定位。</p>
                <p style="text-align: left">这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。</p>
            </section>
            <section>
                <h4>什么是结合两种定位功能于一体呢？</h4>
                <ul>
                    <li>元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。</li>
                    <li>元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。</li>
                    <li>这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。</li>
                </ul>

            </section>
            <section>
                <a href="../demo/css-04-position-2018-1-28/7.sticky.html" target="_blank">Demo</a>
                <p>简单描述下生效过程，因为设定的阈值是 top:0 ，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照物）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。</p>
            </section>
            <section>
                <h3>这个属性的使用场景是什么呢？</h3>
            </section>
            <section>
                <h4>运用 position:sticky 实现头部导航栏固定</h4>
                <a href="../demo/css-04-position-2018-1-28/7.sticky.html" target="_blank">Demo</a>

            </section>
            <section>
                <h4>生效规则</h4>
                <ol style="font-size:30px;">position:sticky 的生效是有一定的限制的，总结如下：
                    <li>须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
                        <ul>
                            <li>并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。</li>
                        </ul>
                    </li>
                    <li>
                        设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：
                        <ul>
                            <li>如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。</li>
                            <li>如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。</li>
                        </ul>
                    </li>
                    <li>达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。</li>
                </ol>
            </section>
            <section>
                <h4>不乐观的兼容性</h4>
                <img src="../img/css-04-position-2018-1-28/sticky.png">
            </section>
        </section>
        <section>
            <h3>7.参考文献</h3>
        </section>
        <section>
            <p>参考文献：<a href="http://web.jobbole.com/90352/" target="_blank">使用 position:sticky 实现粘性布局</a></p>
        </section>
        <section>
            <h3>8.更多讨论</h3>
        </section>
        <section>
            <h4>感谢观看</h4>
            <p>by 覃腾波 | 张峻</p>
        </section>
    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
http://www.ruanyifeng.com/blog/2012/06/internet_protocol_suite_part_ii.html
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>
</body>
</html>
